<template>
  <div class="my_collect pl-3">
    <div class="pt-4 pl-2 pb-3 border-bottom">
      <h5 class="" style="font-weight: bold;color: #1c6285;"><i class="fa fa-university fa-fw" ></i>我的收藏院校</h5>
    </div>
    <!--我的收藏列表-->
    <div class="person_post pt-4" v-if="this.show_info.length>0">
      <div class="post" v-for="(collect) in show_info" :key=collect.college_id>
        <ul class="list-unstyled pl-2">
          <li class="media">
            <div class="media-body">
              <div class=" title">
                <a class="" href="javascript:void(0);"  @click="one_col(collect.college_id)">
<!--                  <i class="fa fa-university fa-fw" ></i>-->
                  {{collect.college_name}}
                </a>
              </div>
              <div class="content pt-2">
                <p>{{collect.college_info}}</p>
              </div>
              <div class="pt-3 fontclass" align="right">
                <a @click="submit(collect.college_id)" href="javascript:void(0);" style="color: #a11918">
                  <i class="fa fa-heart fa-fw"></i> 取消收藏
                </a>
              </div>

            </div>
          </li>
          <div class="dropdown-divider"></div>
        </ul>
      </div>



    </div>
    <div class="noFile" v-else>
      <img :src="imgs.noInfo" alt="...">
      <h2>{{this.nullContainer}}</h2>
    </div>
    <div class="block pt-3 pb-4" v-show="this.show_info.length>0">
      <el-pagination
          @current-change="handleCurrentChange"
          :current-page="collegeContainerPage"
          :page-size="collegeContainerSize"
          layout="total,prev, pager, next"
          :total="total">
        <!--          :background="'whitesmoke'" -->
      </el-pagination>
    </div>
  </div>
</template>

<script>
import noInfo from "@/assets/noFile.png";
import {getMyColByUserID,cancelCollect} from '@/api/College'

export default {
  name: "person_collect",
  data(){
    return{
      imgs:{
        noInfo
      },
      //分页
      collegeContainerPage:0, // 分页的数据：当前页数
      collegeContainerSize:0, // 分页的数据：每页的数量
      total: 0,
      show_info:[],
      collect_info:[],
      nullContainer: "你还没收藏任何院校哦，快去收藏吧~",

    }
  },
  methods:{
    // 获取我的收藏列表
    init(){
      getMyColByUserID({
        // token:window.sessionStorage.getItem('token')
      }).then(res=>{
        this.collect_info=res.data.data;
        this.getShowCollege();
      })
    },
    //分页
    getShowCollege(){
      this.collegeContainerSize=parseInt(5);
      this.show_info = this.collect_info.slice((this.collegeContainerPage - 1) * this.collegeContainerSize, this.collegeContainerPage * this.collegeContainerSize);
      this.total=parseInt(this.collect_info.length);
    },
    //page改变时的回调函数，参数为当前页码
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.collegeContainerPage= parseInt(val);
      this.getShowCollege();
    },
    //跳转
    one_col(college_id){
      if(this.$router.history.current.path !='/One_Colleges'){
        this.$router.push({path:'/One_Colleges',query:{CollegeId:college_id}});
      }
    },
  //  取消收藏
    submit(college_id){
      //再次确认
      this.$confirm('确认取消收藏?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.cancel_collect(college_id);
      }).catch(() => {
        this.$msg.error("取消！");
      });
    },
    cancel_collect(college_id){
      cancelCollect({
        college_id:college_id,
        // token:window.sessionStorage.getItem('token')
      }).then(res=>{
        if(res.data.code===1){
          this.$msg.success("取消收藏成功！")
        }else{
          this.$msg.error("取消收藏失败！");
        }
        this.init();
      })
    },


  },
  created() {
    let _this = this;
    _this.collegeContainerPage= parseInt(1);
    _this.init();
  },

}
</script>

<style scoped>
.el-pagination {
  text-align: center;
}
/*多行显示省略号，数字5为超出5行显示*/
.content p{
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  letter-spacing:3px;
  color: #6b6e71;
  font-size: 16px;
}
.content p:hover{
  color: black;
}
/*新闻标题*/
.title a{
  font-size: 23px;
  color: black;
}
.title a:hover{
  color: #2a7f61;
}
/*无数据图*/
.noFile{
  padding-top: 200px;
  padding-bottom: 300px;
  margin: 0px auto;
  text-align: center;
  font-size: 50px;
  color: #6b6e71;
}
.fontclass a{
  font-size: 18px;
  color: #6b6e71;
}
.fontclass a:hover{
  font-weight: bold;
}
/*.media:hover{*/
/*  background-color: whitesmoke;*/
/*}*/
</style>
